<!DOCTYPE html>
<html lang="en">

<head>
  <title>X5Boot-首页</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://www.w3schools.cn/lib/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="./X5Boot.css">
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
  <script src="https://www.w3schools.cn/lib/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <style>
    body {
      background-color: #f5f5f5;
    }

    /* 移除导航栏的默认 margin-bottom 和圆角边框 */
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }

    /* 添加灰色背景颜色和一些填充到页脚 */
    footer {
      background-color: #ffffff;
      padding: 25px;
    }

    .carousel-inner img {
      width: 100%;
      /* 设置宽度为 100% */
      margin: auto;
      min-height: 200px;
    }

    /* 当屏幕宽度小于 600 像素时隐藏轮播文本 */
    @media (max-width: 600px) {
      .carousel-caption {
        display: none;
      }
    }
  </style>
</head>

<body>

  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">X5Boot</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">首页</a></li>
          <li><a href="#">脸码</a></li>
          <li><a href="#">爆气表</a></li>
          <li><a href="#">自制库</a></li>
          <li><a href="#">头像栏</a></li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <div class="form-group input-group">
            <input type="text" class="form-control" placeholder="搜索..">
            <span class="input-group-btn">
              <button class="btn btn-default" type="button">
                <span class="glyphicon glyphicon-search"></span>
              </button>
            </span>
          </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div style="margin-top: 50px;" id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
    </ol>

    <!-- 幻灯片包装器 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="./轮播2.jpg" alt="图像">
        <div class="carousel-caption">
          <!-- <h3>Sell $</h3>
          <p>Money Money.</p> -->
        </div>
      </div>

      <div class="item">
        <img src="./轮播1.jpg" alt="图像">
        <div class="carousel-caption">
          <!-- <h3>More Sell $</h3>
          <p>Lorem ipsum...</p> -->
        </div>
      </div>
    </div>

    <!-- 左右控件 -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>

  <div style="margin-top: 20px;" class="container text-center">
    <div class="row">
      <div class="col-sm-3 well">
        <div class="well">
          <h4>X5玩家欢迎您</h4>
          <img src="./X5Bootlogo.png" class="img-circle" height="65" width="65" alt="头像">
        </div>
        <div class="well">
          <h4>X5蹦跶模式</h4>
          <p>
            <span class="label label-default">星动模式</span>
            <span class="label label-primary">弹珠模式</span>
            <span class="label label-success">泡泡模式</span>
            <span class="label label-info">传统模式</span>
            <span class="label label-warning">弦月模式</span>
            <span class="label label-danger">节奏模式</span>
          </p>
        </div>
        <div class="alert alert-success fade in">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
          <p><strong>更新延迟通知</strong></p>
          因技术原因，2024/10/10曲库更新后我们无法为您立即提供最新(星动模式6-9星)的排位曲目爆点，计划的更新完成时间是2024/10/30，我们将在更新完成后在网站公告栏再次通知。
        </div>
      </div>
      <div class="col-sm-7">

        <div class="row">
          <div class="col-sm-12">
            <div class="panel panel-default text-left">
              <div class="panel-body">
                <div>当前时间: <em style="Font-style:normal" id="div"></em></div>
                <button type="button" class="btn btn-default btn-sm">
                  <span class="glyphicon glyphicon-thumbs-up"></span> 给自己点个赞
                </button>
              </div>
            </div>
          </div>
        </div>

        <div class="row">
          <div style="width: 100%;height: 100%;" class="col-sm-9">
            <div class="well">
              <h2>《QQ炫舞手游》安卓32位版本下载</h2>
              <h6>公告10月10日设计周版本介绍 10/09</h6>
              <h6>公告10月10日设计周版本有疑问？ 点这里10/09</h6>
              <h6>公告9月5日花语季版本介绍 09/04</h6>
              <h6>公告9月5日花语季版本有疑问？点这里 09/04</h6>
              <h6>公告8月1日炫彩季版本介绍 07/31</h6>
              <h6>公告8月1日炫彩季版本有疑问？点这里 07/31</h6>
              <h6>公告7月4日MV对局版本介绍 07/03</h6>
            </div>
          </div>
        </div>

        
        <div class="row">
          <div class="col-sm-3">
            <div class="well">
             <h4>上帝之手</h4>
             <img src="./舞团图.jpg" class="img-circle" height="55" width="55" alt="头像">
            </div>
          </div>
          <div  class="col-sm-9">
            <div style="height: 200px;" class="well">
              <div id="piechart" style="width: 100%;"></div>
              <p style="line-height: 30px;">神之手：2  乐天使：60  御音师：16  司音士：9  其他/未激活：26</p>
            </div>
          </div>
        </div>

        <div class="row">
          <div style="width: 100%;height: 100%;" class="col-sm-9">
            <div class="well">
              <span class="heading">全区神手最低榜线</span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star"></span>
              <p>每4天刷新一次&emsp;&emsp;&emsp;当前时间:10月18日</p>
              <hr style="border:3px solid #f1f1f1">
              <div class="row">
                <div class="side">
                  <div>悦动指尖</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-5"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>156</div>
                </div>
                <div class="side">
                  <div>三生三世</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-4"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>131</div>
                </div>
                <div class="side">
                  <div>瞳落星辰</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-3"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>122</div>
                </div>
                <div class="side">
                  <div>逐梦之舞</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-2"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>122</div>
                </div>
                <div class="side">
                  <div>花开半夏</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-1"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>119</div>
                </div>
                <div class="side">
                  <div>活力飞扬</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-11"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>114</div>
                </div>
                <div class="side">
                  <div>烂漫惊喜</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-12"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>105</div>
                </div>
                <div class="side">
                  <div>墨舞芳华</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-13"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>102</div>
                </div>
                <div class="side">
                  <div>轻舞飞扬</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-14"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>94</div>
                </div>
                <div class="side">
                  <div>舞韵星空</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-15"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>78</div>
                </div>
                <div class="side">
                  <div>指尖音符</div>
                </div>
                <div class="middle">
                  <div class="bar-container">
                    <div class="bar-16"></div>
                  </div>
                </div>
                <div class="side right">
                  <div>32</div>
                </div>
              </div>
            </div>
          </div>
        </div>



      </div>

      <div class="col-sm-2 well">
        <div class="thumbnail">
          <p style="font-size: 15px; font-weight: 700;">即将举行的活动：</p>
          <!-- <img src="./活动.jpg" alt="巴黎" width="400" height="250"> -->
          <p><strong>舞团内部比赛活动</strong></p>
          <p>10月19日晚8-10点</p>
          <button class="btn btn-primary">信息</button>
        </div>
        <div class="well">
          <img width="100%" src="./wcode.webp" alt="">
        </div>
        <div class="well">
          <img width="100%" src="./下载图片.png" alt="">
        </div>
      </div>
    </div>
  </div>

</body>
<script>
  var i = 0;
  function myDate() {
    var now = new Date();
    var year = now.getFullYear();
    var month = now.getMonth() + 1;
    var day = now.getDate();
    var hours = now.getHours();
    var minutes = now.getMinutes();
    var seconds = now.getSeconds();

    document.getElementById("div").innerHTML = year + "年" + month + "月" + day + "日" + hours + "时" + minutes + "分" + seconds;
  }
  setInterval(myDate, 1000);


  // 加载谷歌图表
  google.charts.load('current', { 'packages': ['corechart'] });
  google.charts.setOnLoadCallback(drawChart);

  // 绘制图表并设置图表值
  function drawChart() {
    var data = google.visualization.arrayToDataTable([
      ['Task', 'Hours per Day'],
      ['神之手', 2],
      ['乐天使', 60],
      ['御音师', 16],
      ['司音士', 9],
      ['更多/未激活', 26]
    ]);

    // 可选； 添加标题并设置图表的宽度和高度
    var options = { 'title': '段位情况', 'width': 410, 'height': 150 };

    // 在 id="piechart" 的 div 元素中显示图表
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(data, options);
  }
</script>

</html>